<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman">
    <meta name="description" content="A simple example">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
</head>

<body>
    <!-- display属性设置为none值----告诉浏览器不要为元素创建任何类型的盒子，
        这时该元素不占据任何空间 -->
    <p id="toggle">
        There are lots of different kinds of fruit - there are over 500 varieties
        of banana alone. By the time we add the countless types of apples, oranges,
        and other well-known fruit, we are faced with thousands of choides.
    </p>
    <p>
        One of the most interesting aspects of fruit is the variety available in
        each country. <span>I live near London</span>, in an area which is known for
        its apples. When travelling in Asia, I was struck by how many different
        kinds of banana were available - many of which had unique flavours and
        which were only avaiable within a small region.
    </p>
    <p>
        <button>Block</button>
        <button>None</button>
    </p>
    <script>
        var buttons = document.getElementsByTagName("button");
        for (let i = 0; i < buttons.length; i++) {
            buttons[i].onclick = function(e){
                document.getElementById("toggle").style.display = 
                e.target.innerHTML;
            };
        }
    </script>
</body>

</html>